<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式api - setup</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
        <com name="组件名"></com>
    </div>
  </body>

  <script>
    const App = Vue.createApp({})
    /**
    App.component("com",{
        setup(props, context){
            console.log(props.name)
            //属性
            console.log(context.attrs)
            //插槽
            console.log(context.slots)
            //触发事件
            console.log(context.emit)
        },
        props:{
            name: String
        },
        template:`<div></div>`
    })
    ***/

    /**
    App.component("com",{
        setup(props,context){
            let data="setup的数据"
            return {
                data
            }
        },
        props:{
            name:String
        },
        template:`
            <div>{{data}}</div>
        `
    })
     **/

     /** 在setup中不要使用this关键字 **/
     App.component("com",{
        setup(props,context){
            let data="setup的数据"
            return ()=> Vue.h('div',[data])
        },
        props:{
            name: String
        }
    })

    /**
     * 组件原生命周期定义方法与setup中生命周期定义方法
     * 组件中                     setup中
     * beforeMount               onBeforeMount
     * mounted                   onMounted
     * beforeUpdate              onBeforeUpdate
     * updated                   onUpdated
     * beforeUnmount             onBeforeUnmount
     * unmounted                 onUnmounted
     * errCaptured               onErrorCaptured
     * renderTracked             onRenderTracked
     * renderTriggered           onRenderTriggered
     * 
     * 当组件同时定义生命周期方法与相应的setup方法，会先调用setup方法，再调用组件内部定义的
     * 
     * 
     **/
    App.mount("#Application")
  </script>

</html>